import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"
import { AssetKeySvg } from "custom/asset_key"
import { AnimatePresence, AnimationProps, motion } from "motion/react"

const SvgPaths: AssetKeySvg[] = [
    "pages/UserCenterPage/components/IframeLoadingMask/char-logo.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-F.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-I.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-L.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-B.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-E.svg",
    "pages/UserCenterPage/components/IframeLoadingMask/char-T.svg",
] as const
const svgs = SvgPaths.map((src) => {
    const SvgMotion = styled(motion.create(Svg))`
        width: 30rem;
        height: 30rem;
        filter: drop-shadow(0 1rem 1rem #000000);
        transform-origin: top center;
        transform: rotateX(90deg);
    `
    return (props: React.ComponentProps<typeof SvgMotion>) => (
        <SvgMotion
            src={src}
            {...props}
        />
    )
})

type Props = Omit<ExtractStyledProps<typeof IframeLoading>, "children"> & {
    isLoading: boolean
}

export default function IframeLoadingMask(props: Props) {
    const {
        //
        isLoading,
        ..._props
    } = props
    return (
        <AnimatePresence>
            {props.isLoading && (
                <IframeLoading
                    {..._props}
                    initial={{ backgroundColor: "#ffffff", opacity: 1 }}
                    animate={{
                        backgroundColor: "#ffffff85",
                        opacity: 1,
                        transition: { duration: 3 },
                    }}
                    exit={{ backgroundColor: "#ffffffce", opacity: 0 }}
                >
                    <BallBounce />
                </IframeLoading>
            )}
        </AnimatePresence>
    )
}

const IframeLoading = styled(motion.div)`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* blur */
        backdrop-filter: blur(5rem);
    }
`

const LoaderWrapper = styled.div`
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
    gap: 15rem;
`

const bounceTransition: AnimationProps["transition"] = {
    repeat: Infinity,
    repeatType: "reverse",
    duration: 0.5,
    type: "spring",
    stiffness: 100,
}

const BOUNCE_HEIGHT = 50

const BallBounce = ({ ballCount = svgs.length }) => {
    return (
        <LoaderWrapper>
            {Array.from({ length: ballCount }).map((_, index) => {
                const SvgMotion = svgs[index % svgs.length]
                return (
                    <SvgMotion
                        key={index}
                        transition={{ ...bounceTransition, delay: 0.5 + index * 0.1 }}
                        animate={{
                            y: [`-${BOUNCE_HEIGHT}rem`, `${0}rem`],
                            scale: [1.2, 1],
                        }}
                        style={
                            index === 0
                                ? {
                                      width: "40rem",
                                      height: "40rem",
                                  }
                                : undefined
                        }
                    />
                )
            })}
        </LoaderWrapper>
    )
}
